<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>产品报修</title>
    <link href="../../plugin/css/fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="../../plugin/weui/css/jquery-weui.min.css" rel="stylesheet" />
    <link href="../../plugin/weui/css/weui.min.css" />
    <link rel="stylesheet" href="../../plugin/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" media="all">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../plugin/mui/css/app.css" />
    <link rel="stylesheet" type="text/css" href="../css/global.css" />
    <link rel="stylesheet" type="text/css" href="../css/repair.css" />
</head>

<body>
    <div class="content">
        <div class="content-block-title">产品信息:</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">服务类型</div>
                <input class="cell-right" type="text" value="报修" disabled="disabled" />
            </div>
            <div class="cell-item">
                <div class="cell-left">产品名称</div>
                <input class="cell-right" type="text" id='showProductPicker' placeholder="请选择" onclick="show()" />
                <i class="fa fa-angle-right"></i>
            </div>
            <div class="cell-item">
                <div class="cell-left">产品序列号</div>
                <input class="cell-right" type="text" placeholder="必填" />
                <i class="fa fa-question-circle"></i>
                <img class="ScanCode" src="../img/scanning.png" />
            </div>
            <div class="cell-item cell-item2">
                <div class="cell-left">上传发票</div>
                <div class="cell-right">
                    <div class="layui-upload">
                        <div class="layui-upload-list" id="bill">
                            <img src="../img/camera.png" class="layui-upload-img" id="billplace">
                            <p id="billerror"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell-item cell-item3">
                <div class="cell-right">
                    <textarea class="cell-right weui-textarea" placeholder="请对产品问题进行描述，不少于10个字" rows="3"></textarea>
                    <div class="addpic">
                        <a href="#uploadPicVideo">
                            <button type="button" class="layui-btn">上传图片/视频</button>
                        </a>
                    </div>
                    <div class="layui-upload detailImg">
                        <div class="layui-upload-list">
                            <blockquote style="margin-top: 10px;">
                                <div class="layui-upload-list" id="picsPlace">
                                </div>
                            </blockquote>
                        </div>
                        <div class="layui-form-item video" id="videoPlace" style="display: none;">
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <p id="picserror"></p>
        <p id="vidoeerror"></p>

        <!--浏览删除图片-->
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>

        <!--上传视频图片弹出框-->
        <div id="uploadPicVideo" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <!-- <input type="file" name="file" id="doc" multiple="multiple"  onchange="javascript:setImagePreviews();" accept="image/*" /> -->
                    <div id="uploadpic">
                        上传图片</div>
                </li>
                <li class="mui-table-view-cell">
                    <div id="uploadVideo">上传视频</div>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#uploadPicVideo">
                        <b>取消</b>
                    </a>
                </li>
            </ul>
        </div>

        <div class="content-block-title">客户信息：</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">联系人</div>
                <input class="cell-right" type="text" placeholder="必填" />
            </div>
            <div class="cell-item">
                <div class="cell-left">联系电话</div>
                <input class="cell-right weui-input" type="tel" placeholder="必填">
                <button class="weui-vcode-btn">获取验证码</button>
            </div>
            <div class="cell-item">
                <div class="cell-left">短信验证码</div>
                <input class="cell-right" type="text" placeholder="必填" />
            </div>
            <div class="cell-item">
                <div class="cell-left">所在地区</div>
                <input class="cell-right" type="text" id='city-picker' placeholder="请选择" onclick="show()" />
                <i class="fa fa-angle-right"></i>
            </div>
            <div class="weui-cell place">
                <input class="weui-input" type="text" placeholder="请填写详细地址，不少于5个字">
            </div>
        </div>
    </div>
    <footer class="footer" id="submitbill">
        <div id="test9">

            <button type="button" id="submitpics" class="mui-col-xs-12 mui-btn-outlined mui-btn-primary mui-btn register">
                提交信息
            </button>

        </div>
    </footer>
</body>

</html>
<script src="../../plugin/jquery/jquery-2.2.3.min.js"></script>
<script src="../../plugin/vue/vue.min.js"></script>
<script src="../../plugin/weui/js/jquery-weui.min.js"></script>
<script src="../../plugin/mui/js/mui.min.js"></script>
<script src="../../plugin/weui/js/city-picker.min.js"></script>
<script src="../../plugin/tencent/cos-js-sdk-v5.min.js"></script>
<script src="../../plugin/layui/layui.js" charset="utf-8"></script>
<script src="../../common/common.js"></script>
<script src="../js/workFeedback.js"></script>
<script>
    mui.init();
    var mask = mui.createMask(); //callback为用户点击蒙版时自动执行的回调；
    function show() {

        mask.show(); //显示遮罩
    }
    $("#showProductPicker").picker({
        title: "请选择",
        cols: [{
            textAlign: 'center',
            displayValues: [
                "<img src='../../plugin/rewrite/img/e007.png' style='display:inline;height:32px'>AXENT.ONE C PLUS 智能坐便器（豪华款）",
                "<img src='../../plugin/rewrite/img/e520.png' style='display:inline;height:32px'>AXENT 智能坐便器",
                "<img src='../../plugin/rewrite/img/e520.png' style='display:inline;height:32px'>AXENT 智能坐便器（基本款）",
                "<img src='../../plugin/rewrite/img/e520.png' style='display:inline;height:32px'>AXENT 智能坐便器1",
                "<img src='../../plugin/rewrite/img/e520.png' style='display:inline;height:32px'>AXENT 智能坐便器2",
                "<img src='../../plugin/rewrite/img/e520.png' style='display:inline;height:32px'>AXENT 智能坐便器3"
            ],
            values: ['AXENT.ONE C PLUS 智能坐便器（豪华款）', 'AXENT 智能坐便器', 'AXENT 智能坐便器（基本款）', 'AXENT 智能坐便器1',
                'AXENT 智能坐便器2', 'AXENT 智能坐便器3'
            ]
        }],
        onClose: function (result) {
            mask.close()
        },
    });
    $("#city-picker").cityPicker({
        title: "请选择所在地",
        onClose: function (result) {
            mask.close()
        },
    });
</script>
<script type="text/javascript">
    //下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {

            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
            var imgObjPreview = document.getElementById("img" + i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            } else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }

        return true;
    }
</script>
</head>
<body>
</body>

</html>